Ext.ns(
	'App.module'
	,'App.module.UserRole'
	,'App.module.UserRole.Role'
	,'App.module.UserRole.User'
);
App.module.Setting.UserRole = Ext.extend(App.Module, {
	name: 'Users & Roles'
	,init: function(){
		this.launcher = {
			text: this.name
			,handler: this.showWin
			,scope: this
		};
	}
	,getTree: function(){
		if(this.tree) return this.tree;
		
		var userRole = this;
		
		this.tree = new Ext.tree.TreePanel({
			userRole: this
			,region: 'west'
			,width: 200
			,split: true
			,enableDD: true
			,useArrows: true
        	,autoScroll: true
			,collapsible: true
			,root: {
				text: 'Admin'
				,expanded: true
				,id: 1
			}
			,loader: new Ext.tree.TreeLoader({
				directFn: API.role.load	
			})
			,tbar: []
			,plugins: [
				new App.module.UserRole.Role.Add()
				,new App.module.UserRole.Role.Delete()
				,new App.module.UserRole.Role.Permission()
			]
			,selModel: new Ext.tree.DefaultSelectionModel({
				listeners: {
					selectionchange: function(sm, node){
						if(!node) return;
						userRole.getStore().load({params: {roleId: node.id}});
					}	
				}	
			})
		});
		
		// create tree editor
		var treeEditor = new Ext.tree.TreeEditor(this.tree, {
				selectOnFocus: true
				,maskRe: /[\w_]/
			},{
				tree: this.tree
				,ignoreNoChange: true
				,listeners: {
					complete: function(editor, newValue, oldValue){
						var data = {
							id: editor.editNode.id
							,name: newValue	
						};
						
						editor.tree.el.mask('Processing...');
						API.role.update(data, function(r){
							editor.tree.el.unmask();
							if(!r.success) return Ext.Msg.alert('Error', r.msg);
						});	
					}	
			}	
		});
		
		this.tree.editor = treeEditor;
		
		return this.tree;
	}
	,getStore: function(){
		if(this.store) return this.store;
		this.store = new Ext.data.DirectStore({
			baseParams: {start: 0, limit: 50}
			,proxy: new Ext.data.DirectProxy({
				directFn: API.user.load	
			})
			,reader: new Ext.data.JsonReader({
				root: 'rows'
				,totalProperty: 'total'
			}, ['id', 'email', 'first_name', 'last_name', 'last_name', 'active'])
			,sortInfo: {
				field: 'first_name'
				,direction: 'ASC'	
			}
		});
		return this.store;
	}
	,getCm: function(){
		if(this.cm) return this.cm;
		this.cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer({
				header: 'No.'
				,searchable: false	
			}),{
				header: '#'
				,dataIndex: 'id'
				,sortable: true
				,width: 60
				,fixed: true
				,hidden: true
			},{
				header: 'E-mail'
				,dataIndex: 'email'
				,sortable: true
				,defaultSearch: true
			},{
				header: 'First Name'
				,dataIndex: 'first_name'
				,sortable: true
				,defaultSearch: true
				,editor: new Ext.form.TextField({allowBlank: false, selectOnFocus: true})
			},{
				header: 'Last Name'
				,dataIndex: 'last_name'
				,sortable: true
				,defaultSearch: true
				,editor: new Ext.form.TextField({allowBlank: false, selectOnFocus: true})
			},{
				header: 'Active'
				,xtype: 'checkboxcolumn'
				,on: 1
				,off: 0
				,dataIndex: 'active'
				,sortable: true
				,width: 80
				,fixed: true
			}
		]);
		return this.cm;
	}
	,getToolbar: function(){
		if(this.toolbar) return this.toolbar;
		
		this.toolbar = new Ext.Toolbar({
			
		});
		
		return this.toolbar;
	}
	,getGrid: function(){
		if(this.gird) return this.grid;
		
		var store = this.getStore();
		var cm = this.getCm();
		var toolbar = this.getToolbar();
		var tree = this.getTree();
		
		this.grid = new App.Grid({
			region: 'center'
			,store: store
			,cm: cm
			,tbar: toolbar
			,tree: tree
			,plugins: [
				new App.module.UserRole.User.Add()
				,new App.module.UserRole.User.Update()
				,new App.module.UserRole.User.Delete()
				,new App.module.UserRole.User.Search()
			]
			,listeners: {
				afteredit: function(o){
					var data = {
						id: o.record.data.id
						,field: o.field
						,value: o.value
					};
					API.user.update(data, function(r){
						if(!r) Ext.Msg.alert('Error', 'Unknow error!');
						if(r.success) return o.record.commit();
						
						Ext.Msg.alert('Error', r.msg);
						o.record.reject();
					});
				}	
			}
		});
		return this.grid;
	}
	,getItems: function(){
		return [
			this.getTree()
			,this.getGrid()
		];
	}
	,getWin: function(){
		if(!this.win){
			var items = this.getItems();
			this.win = new App.Window({
				id: this.id
				,title: this.name
				,iconCls: this.id + '-16x16'
				,layout: 'border'
				,border: false
				,defaults: {border: true}
				,items: items
			});	
		}
		return this.win;
	}
	,showWin: function(id){
		this.getWin().show(id);	
	}
});